<template>
  <div class="nicknameInput">
    <label v-if="title!==''" style="text-align:right;">
      <span v-show="req" style="color:red;">*</span>
      {{title}}:
    </label>
    <el-input
      class="input01-input"
      :placeholder="placeholder"
      v-model="val"
      v-on:blur="checkphoneExit"
      clearable
    >
      <i slot="suffix" v-bind:class="[icon, 'el-input__icon']"></i>
    </el-input>
    <!-- <span class="warningword" v-show="showWord === 1">
      <i class="iconfont icon-buoumaotubiao20"></i>
      <span class="wordc">请输入账号</span>
    </span> -->
    <span class="warningword" v-show="showWord === 2">
      <i class="iconfont icon-buoumaotubiao20"></i>
      <span class="wordc">请输入有效的账号</span>
    </span>
    <span class="warningword" v-show="showWord === 4">
      <i class="iconfont icon-buoumaotubiao20"></i>
      <span class="wordc">账号已注册</span>
    </span>
  </div>
</template>
<style scoped>
.nicknameInput {
  margin: 5px 5px;
}
label{
  display: inline-block;
  min-width: 70px;  
}
.nicknameInput i {
  font-size: 18px;
}
.nicknameInput >>> .el-input{
   width: auto;
}
.nicknameInput >>> .el-input__inner {
  background: #ffffff;
  min-width: 150px;
  padding-right: 15px;
  height: 32px;
}
.nicknameInput >>> .el-input__icon {
  height: 32px;
  line-height: 32px;
}
.warningword {
  display: inline-block;
  color: red;
  padding-left: 10px;
}
.warningword i {
  /* padding-right: 5px; */
  font-size: 18px;
}
.wordc{
    display: inline-block;
    height: 35px;
    line-height: 35px;
    border: 1px solid #e4dddd;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
}
</style>
<script>
export default {
  name: "nicknameInput",
  props: {
    title: {
      default: ""
    },
    icon: {
      default: ""
    },
    value: {
        default: ""
    },
    placeholder: {
      default: "请输入账号"
    },
    req: {
      default: true
    },
    checkExit: {
      default: true //是否需要检查账号有没有注册过
    },
    roleId: {
      default: ""
    }
  },
  meta: {
    descr: "输入账号的输入框"
  },
  data() {
    return {
      val: "",
      showWord: 3,
      nicknameExitdata: {
        userName: "",
        roleId: ''
      }
    };
  },
  methods: {
    checkphoneExit() {
      let that = this;
      if (that.checkExit) {
        that.nicknameExitdata.userName = that.val;
        that.nicknameExitdata.roleId = that.roleId
        if (that.showWord === 3) {
          that.$axios.post("/Edison/auth/register/checkUserNameExisted",that.nicknameExitdata,false,false)
            .then(res => {
              // console.log(res.data)
              if (res.data.code === 0) {
                if (res.data.data == true) {
                  that.showWord = 3;
                } 
              } else {
                // that.$message.error(res.data.msg);
                that.showWord = 4;
              }
            });
        }
      }
    }
  },
  created() {
    this.val = this.value;
  },
  watch: {
    val: {
      handler(newName, oldName) {
        let that = this;
        this.$emit("input", newName);
        //  console.log(newName.match(/\D/));
        if (that.req) {
            // console.log("req",true);
          if (newName != "") { 
            if (newName.match(/\D/) === null) {
              that.showWord = 2;
            } else {
              if(newName.match("@")){
                that.showWord = 2;    
              } else{
                that.showWord = 3;  
              } 
               
            }
          } else {
            that.showWord = 1;
          }
        } else {
            // console.log(this.val);
          if (newName != "") {
            if (newName.match(/\D/) === null) {
              that.showWord = 2;
            } else {
                if(newName.match("@")){
                that.showWord = 2;    
              } else{
                that.showWord = 3;  
              } 
            }
          } else {
            that.showWord = 3;
          }
        }
      },
    //   immediate: true,
      deep: true
    },
    value() {
      this.val = this.value;
    }
  }
};
</script>
